<template>
	<view class="main-box">
		<view class="where"></view>
		<view class="banner">
			<image src="@/static/banner_dog.png"></image>
			<!-- <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" circular :duration="800">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<view class="swiper-item">
						<image :src="baseUrl + '/file/api/uploadFile/downloadByKey?id=' + item.pictureId" class="img"
							mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper> -->
		</view>
		<view class="mid-msg" v-if="mId">设备号：{{mId}}</view>
		<u-waterfall v-model="shopList">
			<template v-slot:left="{leftList}">
				<view>
					<view class="shopList" style="margin-left: 20rpx;">
						<view v-for="(item,index) in leftList" :key="index" @click="createOrder(item)">
							<image :src="item.productImgUrl" mode="aspectFill" class="short-img"
								style="border-radius: 13rpx;"></image>
							<view>{{item.productName}}</view>
							<view>{{item.prDescription?item.prDescription:""}}</view>
							<view class="shopitem-price">
								<view>￥{{item.price}}</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view style="margin-left: 10rpx;">
					<view class="shopList">
						<view v-for="(item,index) in rightList" :key="item.id" @click="createOrder(item)">
							<image :src="item.productImgUrl" mode="aspectFill" style="border-radius: 13rpx;"></image>
							<view>{{item.productName}}</view>
							<view>{{item.prDescription?item.prDescription:""}}</view>
							<view class="shopitem-price">
								<view>￥{{item.price}}</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</u-waterfall>

		<view v-if="showQuesheng" class="quesheng">
			<image src="@/static/no-data.png" mode="aspectFill"></image>
			<view>这个商家很懒，还没有上架商品~</view>
		</view>

		<view class="good_box" v-show="hide_good_box" :style="{left: bus_x+'px',top: bus_y+'px'}">
			<image :src="feiBox"></image>
		</view>
		
		<registPop ref="registPop"></registPop>

	</view>
</template>

<script>
	let that;
	import commonMinxi from "@/commom/commonMixin.js" 
	import registPop from "@/component/registPop";

	export default {
		data() {
			return {
				menuList: [],
				baseUrl: getApp().globalData.baseUrl,
				bannerList: [],
				shopList: [],
				showQuesheng: false,
				token: uni.getStorageSync("token"),
				mId: getApp().globalData.mId,
				info: uni.getStorageSync('info'),
				canClick: true
			}
		},
		mixins: [commonMinxi],
		components: {
			registPop
		},
		onLoad() {
			this.busPos = {};
			uni.getSystemInfo().then(res => {
				this.busPos['x'] = res[1].windowWidth * .85;
				this.busPos['y'] = res[1].windowHeight * .85;
			})

			this.getMenuList()
			console.log('设备货道里内容展示========>',this.mId)
			this.getSlotList()
			
		},
		mounted() {
			that = this
			that.getBannerList()
			that.getSlotList()
		},
		methods: {
			toClassify(index) {
				uni.navigateTo({
					url: "/pages/classify/classify?index=" + index
				})
				
			},
			getBannerList() {
				this.$http('/common/api/commonData/getTenantPictureList', {
					"condition": {
						"typeFlag": 1,
						"tenantId": uni.getStorageSync('tenantId')
					}
				}, res => {
					this.bannerList = res.data.items
				})
			},
			getShopList() {
				this.$http('/common/api/commonData/getProductList', {
					"condition": {
						"tenantId": uni.getStorageSync('tenantId'),
						"storageMode": 3
					}
				}, res => {
					if (res.data.items.length > 0) {
						this.shopList = res.data.items.slice(0, 10);
						this.shopList = this.shopList.map(item => {
							item.httpPrImgUrl = this.getImgUrlRes(item.prImgUrl)
							return item;
						})

					} else {
						this.showQuesheng = true
					}

				})
			},
			goBack() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			changeList(e) {
				console.log("changeList:", e);
			},
			getImgUrlRes(url) {
				return this.baseUrl + '/file/api/uploadFile/downloadByKey?id=' + url;
			},
			getSlotList(){
				if(!this.mId){
					return uni.showToast({
						title: '请重新扫码识别设备!',
						icon: 'none'
					})
				}
				this.$http(`/pay/api/product/getProducts?mid=${this.mId}`,{},res=>{
					console.log('货道列表========>',res)
					this.shopList = res.data.products
					this.shopList = this.shopList.map(item => {
						item.productImgUrl = this.getImgUrlRes(item.productImgUrl)
						return item;
					})
				})
			},
			
			getMenuList() {
				this.$http('/common/api/commonData/getProductTypeList', {
					"condition": {
						"isRoot": true,
						"productTypeFlag": "2",
					}
				}, res => {
					this.menuList = res.data.items
				})
			},
			createOrder(e){
				this.validationLogin({
					success: () => {
						if(this.canClick){
							uni.showModal({
								title: '温馨提示',
								content: `您选择了${e.productName},确认支付？`,
								confirmText: '确认',
								success: (res) => {
									if(res.confirm){
										this.canClick = false
										uni.showLoading({ title: '加载中...' })
										let data = {
											paymentType: 1,
											PayType: 4,
											mid: this.mId,
											slotNo: e.soltNo,
											openId: uni.getStorageSync('openId'),
											price: e.price
										};
										this.$http('/order/api/orderInfo/createUnifiedOrder',data,res=>{
											this.pay(res.data);
										},'POST',err=>{
											this.canClick = true;
											uni.hideLoading();
											uni.showToast({
												title: JSON.stringify(err.data?.error?.message) || 'fail:orderInfo/createUnifiedOrder',
												icon: 'none'
											})
										})
									}
								}
							})
						}
					},
					regist: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					},
					scan: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					}
				})
				
			},
			pay(data) {
				let datas = {
					outerUserId: this.info.id,
					orderNo: data.parameter.outTradeNo,
					isSocketShip: true
				}
				this.$http('/member/api/memberCard/consumeByFace', datas, (res) => {
					this.canClick = true;
					uni.hideLoading();
					console.log('支付返回',res)
					if(res.data.status){
						let msg = res.data.errorMsg
						if(msg == '此卡余额不足'){
							msg = msg + ',请充值!'
						}
						uni.showToast({
							title: msg,
							icon: 'none'
						})
					}else{
						uni.showToast({
							title: '支付成功！',
							icon: 'none'
						})
					}
				}, 'POST',err=>{
					console.log('失败返回',err)
				});
			},
			toShopCar(){
				this.validationLogin({
					success:() => {
						uni.navigateTo({
							url: "/pages/shopCar/shopCar"
						})
					},
					regist:() => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					},
					scan: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.main-box {
		position: relative;
	}

	.where {
		// background: linear-gradient(to right, #ace8f6,#ace8f6 60%);
		width: 100%;
		color: #FFFFFF;
		padding-bottom: 150upx;

		>view {
			width: 100%;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			box-sizing: border-box;
			padding-left: 30upx;
			text-align: center;
			position: relative;

			>image {
				width: 25px;
				height: 25px;
				margin-bottom: -7.5px;
				margin-right: 10upx;
			}
		}
	}

	.banner {
		width: 95%;
		height: 400rpx;
		border-radius: 20upx;
		margin: -100upx auto 0;
		overflow: hidden;
		position: relative;
		z-index: 99;
		>image{
			width: 100%;
			height: 100%;
			padding-top: 20rpx;
		}
		.banner-tipsbox{
			display: flex;
			flex-direction: row;
			align-items: center;
			position: absolute;
			bottom: 0;
			right: 0;
			z-index: 50;
			padding: 10rpx 30rpx 10rpx 40rpx;
			border-radius: 12rpx;
			background-color: rgba(0, 0, 0, 0.6	);
			color: #fff;
			
			image{
				width: 42rpx;
				height: 42rpx;
				transform: rotate(-45deg);
				 animation: myTouch 3s infinite;
				 position: absolute;
				 top: 10rpx;
				 left: 5rpx;
			}
			text{
				margin-left: 16rpx;
			}
		}
		.swiper {
			width: 100%;
			height: 100%;

			.swiper-item {
				width: 100%;
				height: 100%;
				border-radius: 20upx;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 20upx;
				}
			}
		}
	}
	.mid-msg{
		padding: 20rpx 0 0 20rpx;
	}

	.menuBox {
		width: 710rpx;
		display: flex;
		flex-wrap: wrap;
		font-size: 22upx;
		margin-top: 20rpx;
		margin-left: 20rpx;
		background-color: #fff;
		border-radius: 23rpx;

		>view {
			width: 20%;
			text-align: center;
			margin-top: 20upx;
			margin-bottom: 20upx;

			>image {
				width: 100upx;
				height: 100upx;
				border-radius: 50%;
				margin-bottom: 10upx;
				background-color: #FFFFFF;
			}
		}
	}

	.shopList {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: space-between;

		margin-top: 20upx;

		>view {
			background-color: #FFFFFF;
			overflow: hidden;
			border-radius: 10upx;
			width: 345upx;
			margin-bottom: 20upx;
			display: flex;
			flex-direction: column;

			>image:first-child {
				width: 300upx;
				height: 300upx;
				margin: 22.5upx auto;
				display: block;
			}

			.short-img:first-child {
				width: 300upx;
				height: 250upx;
			}

			>view {
				width: 300upx;
				margin: 0 auto;
			}

			>view:nth-child(2) {
				font-size: 28upx;
				height: 40upx;
				line-height: 40upx;
				color: #555555;
			}

			>view:nth-child(3) {
				font-size: 20upx;
				min-height: 10upx;
				line-height: 30upx;
				color: #999999;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			>view:nth-child(4) {
				font-size: 32upx;
				height: 60upx;
				line-height: 60upx;
				color: #FF3C3C;
				font-weight: 600;
				margin: 5upx auto 20upx;
			}

			.shopitem-price {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.shop-badge {

					width: 50rpx;
					height: 50rpx;
					border-radius: 25rpx;
					background-color: #ace8f6;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						width: 28rpx;
						height: 28rpx;
					}

				}
			}
		}
	}

	.back {
		width: 100upx;
		height: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.back image {
		width: 40upx;
		height: 40upx;
		position: absolute;
		bottom: 50%;
		left: 50%;
		margin-bottom: -20upx;
		margin-left: -20upx;
	}

	.quesheng {
		width: 100%;
		font-size: 26upx;
		text-align: center;
		color: #999999;
		padding: 50upx 0;

		image {
			width: 200rpx;
			height: 200rpx;
			margin-top: 20rpx;
		}
	}

	.good_box {
		width: 40px;
		height: 40px;
		position: fixed;
		border-radius: 50%;
		overflow: hidden;
		left: 50%;
		top: 50%;
		z-index: +99;
		border: 1px solid #fff;
		background: rgba(120, 188, 255, 0.2);
	}

	.good_box image {
		display: block;
		width: 100%;
		height: 100%;
	}

	@keyframes myTouch {
		
		0%{
			width: 30rpx;
			height: 30rpx;
		}
		5%{
			width: 32rpx;
			height: 32rpx;
		}
		10%{
			width: 34rpx;
			height: 34rpx;
		}
		15%{
			width: 36rpx;
			height: 36rpx;
		}
		20%{
			width: 38rpx;
			height: 38rpx;
		}
		25%{
			width: 40rpx;
			height: 40rpx;
		}
		30%{
			width: 42rpx;
			height: 42rpx;
			top: 8rpx;
		}
		35%{
			width: 44rpx;
			height: 44rpx;
			top: 7rpx;
		}
		40%{
			width: 46rpx;
			height: 46rpx;
			top: 6rpx;
		}
		45%{
			width: 44rpx;
			height: 44rpx;
			top: 7rpx;
		}
		50%{
			width: 42rpx;
			height: 42rpx;
			top: 8rpx;
		}
		55%{
			width: 40rpx;
			height: 40rpx;
			top: 7rpx;
		}
		60%{
			width: 38rpx;
			height: 38rpx;
			top: 8rpx;
		}
		
		65%{
			width: 36rpx;
			height: 36rpx;
		}
		70%{
			width: 34rpx;
			height: 34rpx;
		}
		75%{
			width: 32rpx;
			height: 32rpx;
		}
		80%{
			width: 36rpx;
			height: 36rpx;
		}
		85%{
			width: 38rpx;
			height: 38rpx;
		}
		90%{
			width: 40rpx;
			height: 40rpx;
		}
		95%{
			width: 38rpx;
			height: 38rpx;
		}
		100%{
			width: 36rpx;
			height: 36rpx;
		}
		
	}
		
		
		
</style>